.lwq-alert {
  --lwq-alert-title-text-color: var(--lwq-text-color-regular);
  --lwq-alert-border-radius: var(--lwq-border-radius-base);
  --lwq-alert-title-font-size: var(--lwq-font-size-small);
  --lwq-alert-bg-color: var(--lwq-fill-color-blank);
  --lwq-alert-icon-color: var(--lwq-text-color-disabled); 
  --lwq-alert-close-font-size: var(--lwq-font-size-extra-small); 
  --lwq-alert-des-font-size: var(--lwq-font-size-extra-small); 
}

.lwq-alert {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--lwq-alert-bg-color);
  border-radius: var(--lwq-alert-border-radius);
  opacity: 1;
  &.is-center {
    justify-content: center;
  }
}

.lwq-alert__icon {
  margin-right: 6px;
}

.lwq-alert__content {
  color: var(--lwq-alert-text-color);
  overflow: hidden;
}

.lwq-alert__description {
  margin: 0;
  font-size: var(--lwq-alert-des-font-size);
}

.lwq-alert__title {
  font-size: var(--lwq-alert-title-font-size);
  color: var(--lwq-alert-text-color);
}

.lwq-alert__close {
  cursor: pointer;
  color: var(--lwq-alert-icon-color);
  font-size: var(--lwq-alert-close-font-size);
  position: absolute;
  right: 16px;
  top: 10px;
}

@each $val in success,warning,info,danger {
  .lwq-alert--$(val) {
    &.is-light {
      --lwq-alert-bg-color: var(--lwq-color-$(val)-light-8);
      --lwq-alert-text-color: var(--lwq-color-$(val));
    }
    &.is-dark {
      --lwq-alert-bg-color: var(--lwq-color-$(val));
      --lwq-alert-text-color: var(--lwq-fill-color-blank);
      .lwq-alert__close {
        color: var(--lwq-fill-color-blank);
      }
    }
  }
  .lwq-alert__icon--$(val) {
    color: var(--lwq-color-$(val));
  }
}

.alert-fade-enter-from, .alert-fade-leave-to {
  opacity: 0;
}
.alert-fade-enter-active, .alert-fade-leave-active {
  transition: opacity 1s ease;
}
